<!--
 * @Author: ChunLai
 * @Date: 2022-03-28 18:05:18
 * @LastEditTime: 2025-11-25 14:06:28
 * @Description: 头部banner+产品简述
 * @FilePath: \01.latest-short-insure\src\views\index\components\TopBanner.vue
-->
<template>
  <div class="top-banner-md">
    <img v-if="bannerImg" :src="bannerImg" class="banner-img" alt />
    <div v-else class="img_block"></div>
    <!-- 产品信息描述 -->
    <div class="pro-intro-main">
      <div class="pro-intro">
        <h3 class="pro_name" v-if="productName">
          {{ productName }}
        </h3>
        <div class="prelude-record" v-if="recordName">
          备案名：{{ recordName }}
        </div>
        <div class="mt6 ft12 ft_c6">
          <div class="flex flex_w" v-if="describeLabel">
            <span
              class="tagCell"
              v-for="(item, index) in describeLabel.split(',')"
              :key="index"
              >{{ item }}</span
            >
          </div>
          <div class="desc_txt" v-if="saleAreaBranches.length > 0">
            可销售区域：
            <span
              class="area_txt ftw5"
              v-for="(item, idx) in saleAreaBranches"
              :key="`sale-area-${idx}`"
              >{{ item.provinceName
              }}<i v-if="idx != saleAreaBranches.length - 1">、</i></span
            >
          </div>
        </div>
        <p v-if="gysFullName">本产品由{{ gysFullName }}承保</p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "TopBanner",
  data() {
    return {};
  },
  computed: {
    ...mapGetters({
      version: "version",
      gysFullName: "dictionary/gysFullName",
      bannerImg: "home/bannerImg",
      recordName: "home/recordName",
      // saleArea: 'agent/saleArea',
      lowestPrice: "varietyInfo/lowestPrice",
      productName: "varietyInfo/productName",
      describeText: "varietyInfo/describeText",
      describeLabel: "varietyInfo/describeLabel",
      saleAreaBranches: "varietyInfo/provinces",
    }),
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.pro_name {
  font-size: 17px;
  font-weight: 600;
  line-height: 22px;
  font-family: MiSans;
  color: rgba(36, 36, 36, 1);
}
.tagCell {
  display: flex;
  align-items: center;
  padding: 0 7px;
  height: 26px;
  color: #f54040;
  background-color: #fff0f0;
  border-radius: 2px;
  font-size: 12px;
  margin-left: 0;
  margin-bottom: 5px;
  margin-right: 4px;
  // position: relative;
  // &::after {
  //   content: " ";
  //   width: 200%;
  //   height: 200%;
  //   position: absolute;
  //   top: 0;
  //   left: 0;
  //   border-radius: inherit;
  //   transform: scale(0.5);
  //   transform-origin: 0 0;
  //   pointer-events: none;
  //   box-sizing: border-box;
  //   border: 1px solid #f54040;
  // }
}
.prelude-record {
  padding-top: 6px;
  font-size: 12px;
  color: #999;
}

.banner-img {
  width: 100%;
  height: auto;
  object-fit: fill;
  max-width: 750px;
  margin: 0 auto;
}

.img_block {
  width: 100%;
  height: 30px;
}

.pro-intro-main {
  position: relative;
  z-index: 10;
}

.pro-intro {
  padding: 12px;
  background-color: #ffffff;

  p {
    font-size: 12px;
    color: rgba(116, 116, 116, 1);
    margin-top: 4px;
    margin-bottom: 4px;
  }
}

h3 {
  color: #333333;
}

em {
  font-style: normal;
}

.pro-rule {
  display: flex;
  flex-direction: column;

  .rule-li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 2;

    .desc-txt {
      width: calc(100% - 20px);
    }
  }
}

.area_txt {
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  color: rgba(231, 162, 73, 1);
}

.desc_txt {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  color: #999;
}
</style>
